<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盛最多水的容器 - 算法可视化</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
        }
        .code-block {
            background-color: #1e293b;
            border-radius: 0.5rem;
        }
        .algorithm-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .algorithm-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .highlight {
            position: relative;
        }
        .highlight::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background-color: rgba(56, 189, 248, 0.2);
            z-index: -1;
        }
        .container-visual {
            height: 300px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 10px;
            padding-top: 2rem;
        }
        .bar {
            width: 40px;
            background: linear-gradient(to top, #3b82f6, #93c5fd);
            border-radius: 4px 4px 0 0;
            transition: all 0.3s ease;
            position: relative;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .active-bar {
            background: linear-gradient(to top, #10b981, #6ee7b7);
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
        }
        .pointer {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            color: #ef4444;
            font-weight: bold;
            font-size: 1.2rem;
        }
        .water {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: rgba(56, 189, 248, 0.5);
            transition: height 0.5s ease;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Hero Section -->
    <section class="hero text-white py-20">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">盛最多水的容器</h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90 leading-relaxed">
                    探索双指针算法在解决经典容器问题中的精妙应用
                </p>
                <div class="flex justify-center space-x-4">
                    <a href="#problem" class="px-6 py-3 bg-white text-blue-700 font-medium rounded-full hover:bg-gray-100 transition duration-300">
                        <i class="fas fa-info-circle mr-2"></i>问题描述
                    </a>
                    <a href="#solution" class="px-6 py-3 bg-transparent border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-blue-700 transition duration-300">
                        <i class="fas fa-lightbulb mr-2"></i>解决方案
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section id="problem" class="py-16 bg-white">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="mb-12">
                <h2 class="text-3xl font-bold mb-6 text-center font-serif">问题描述</h2>
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200">
                    <p class="text-lg leading-relaxed mb-6">
                        给定 <span class="highlight font-bold">n 个非负整数</span> a₁, a₂, ..., aₙ，每个数代表坐标中的一个点 (i, aᵢ)。在坐标内画 n 条垂直线，垂直线 i 的两个端点分别是 (i, aᵢ) 和 (i, 0)。
                    </p>
                    <p class="text-lg leading-relaxed font-bold">
                        找出其中的两条线，使得它们与 x 轴共同构成的容器能够<span class="highlight">容纳最多的水</span>。
                    </p>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fas fa-chart-area text-blue-500 mr-3"></i>示例可视化
                    </h3>
                    <div class="container-visual" id="exampleVisualization">
                        <!-- 示例可视化将通过JS动态生成 -->
                    </div>
                    <p class="text-center text-gray-600 mt-4">
                        示例输入: [1, 8, 6, 2, 5, 4, 8, 3, 7]
                        <br>
                        最大面积: 49 (选择高度为 8 和 7 的两条线)
                    </p>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fas fa-question-circle text-blue-500 mr-3"></i>问题理解
                    </h3>
                    <div class="prose max-w-none">
                        <ul class="space-y-3 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>容器的高度由两条线中较短的一条决定</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>容器的宽度是两条线之间的距离</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>面积计算公式: min(height[left], height[right]) × (right - left)</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>目标是找到所有可能的容器中面积最大的一个</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Solution Section -->
    <section id="solution" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6 max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center font-serif">解决方案</h2>
            
            <div class="algorithm-card bg-white rounded-xl overflow-hidden mb-12">
                <div class="p-6 md:p-8">
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fas fa-brain text-blue-500 mr-3"></i>双指针算法
                    </h3>
                    <div class="prose max-w-none mb-6">
                        <p class="text-lg leading-relaxed">
                            使用两个指针 <span class="font-bold text-blue-600">left</span> 和 <span class="font-bold text-blue-600">right</span> 从数组两端向中间移动：
                        </p>
                        <ol class="space-y-3 mt-4 pl-5">
                            <li class="flex items-start">
                                <span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
                                <span>初始化指针：left = 0, right = n-1</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
                                <span>计算当前面积: min(height[left], height[right]) × (right - left)</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
                                <span>更新最大面积</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">4</span>
                                <span>移动较短的指针 (因为面积受限于较短边)</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3">5</span>
                                <span>重复步骤2-4直到 left ≥ right</span>
                            </li>
                        </ol>
                    </div>
                    
                    <div class="flex items-center mb-6">
                        <div class="flex-1 border-t border-gray-200"></div>
                        <span class="px-3 text-gray-500">算法复杂度</span>
                        <div class="flex-1 border-t border-gray-200"></div>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <div class="text-sm text-blue-600 font-medium mb-1">时间复杂度</div>
                            <div class="text-2xl font-bold text-blue-800">O(n)</div>
                            <div class="text-sm text-gray-600">线性时间复杂度</div>
                        </div>
                        <div class="bg-green-50 p-4 rounded-lg">
                            <div class="text-sm text-green-600 font-medium mb-1">空间复杂度</div>
                            <div class="text-2xl font-bold text-green-800">O(1)</div>
                            <div class="text-sm text-gray-600">常数空间复杂度</div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gray-800 p-6 rounded-b-xl">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-code text-gray-400 mr-2"></i>
                        <h4 class="text-gray-300 font-medium">Python 实现</h4>
                    </div>
                    <pre class="code-block p-4 rounded-lg overflow-x-auto text-gray-200"><code>def maxArea(height):
    left, right = 0, len(height) - 1
    max_area = 0
    while left < right:
        area = min(height[left], height[right]) * (right - left)
        max_area = max(max_area, area)
        if height[left] < height[right]:
            left += 1
        else:
            right -= 1
    return max_area</code></pre>
                </div>
            </div>

            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-play-circle text-blue-500 mr-3"></i>算法可视化
                </h3>
                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <div class="container-visual" id="algorithmVisualization">
                        <!-- 算法可视化将通过JS动态生成 -->
                    </div>
                    <div class="mt-6 flex justify-center space-x-4">
                        <button id="playBtn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
                            <i class="fas fa-play mr-2"></i>开始演示
                        </button>
                        <button id="resetBtn" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition flex items-center">
                            <i class="fas fa-redo mr-2"></i>重置
                        </button>
                    </div>
                    <div class="mt-4 text-center text-gray-600">
                        <p id="currentStepInfo">准备开始算法演示...</p>
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fas fa-project-diagram text-blue-500 mr-3"></i>算法流程图
                    </h3>
                    <div class="mermaid">
                        graph TD
                            A[开始] --> B[初始化指针 left=0, right=n-1]
                            B --> C[计算当前面积]
                            C --> D{left < right?}
                            D -->|是| E[更新最大面积]
                            E --> F{height[left] < height[right]?}
                            F -->|是| G[left++]
                            F -->|否| H[right--]
                            G --> C
                            H --> C
                            D -->|否| I[返回最大面积]
                            I --> J[结束]
                    </div>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fas fa-lightbulb text-blue-500 mr-3"></i>为什么双指针有效？
                    </h3>
                    <div class="bg-white p-6 rounded-xl border border-gray-200">
                        <div class="prose max-w-none">
                            <p class="mb-4">
                                关键在于理解为什么移动较短的指针是正确的选择：
                            </p>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-arrow-right text-blue-500 mt-1 mr-2"></i>
                                    <span>当前面积受限于较短的边</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-arrow-right text-blue-500 mt-1 mr-2"></i>
                                    <span>移动较长的指针不会增加面积，因为高度不会增加而宽度会减少</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-arrow-right text-blue-500 mt-1 mr-2"></i>
                                    <span>移动较短的指针可能找到更高的边，从而可能增加面积</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-arrow-right text-blue-500 mt-1 mr-2"></i>
                                    <span>这种方法确保我们不会错过任何可能的更大面积</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化Mermaid
            mermaid.initialize({ startOnLoad: true, theme: 'default' });
            
            // 示例可视化
            const exampleData = [1, 8, 6, 2, 5, 4, 8, 3, 7];
            const exampleVisualization = document.getElementById('exampleVisualization');
            renderVisualization(exampleVisualization, exampleData, 1, 7);
            
            // 算法可视化
            const algorithmVisualization = document.getElementById('algorithmVisualization');
            const playBtn = document.getElementById('playBtn');
            const resetBtn = document.getElementById('resetBtn');
            const currentStepInfo = document.getElementById('currentStepInfo');
            
            let algorithmData = [...exampleData];
            let left = 0;
            let right = algorithmData.length - 1;
            let maxArea = 0;
            let animationInterval;
            let isPlaying = false;
            
            function renderVisualization(container, data, leftIndex, rightIndex) {
                container.innerHTML = '';
                const maxHeight = Math.max(...data);
                
                data.forEach((height, index) => {
                    const bar = document.createElement('div');
                    bar.className = 'bar';
                    bar.style.height = `${(height / maxHeight) * 100}%`;
                    
                    if (index === leftIndex || index === rightIndex) {
                        bar.classList.add('active-bar');
                        
                        const pointer = document.createElement('div');
                        pointer.className = 'pointer';
                        pointer.textContent = index === leftIndex ? 'L' : 'R';
                        bar.appendChild(pointer);
                        
                        // 添加水
                        if (leftIndex !== null && rightIndex !== null) {
                            const water = document.createElement('div');
                            water.className = 'water';
                            water.style.height = `${(Math.min(data[leftIndex], data[rightIndex]) / maxHeight) * 100}%`;
                            bar.appendChild(water);
                        }
                    }
                    
                    const label = document.createElement('div');
                    label.className = 'absolute top-full left-0 right-0 text-center pt-1 text-sm font-medium';
                    label.textContent = height;
                    bar.appendChild(label);
                    
                    bar.style.position = 'relative';
                    container.appendChild(bar);
                });
            }
            
            function resetVisualization() {
                algorithmData = [...exampleData];
                left = 0;
                right = algorithmData.length - 1;
                maxArea = 0;
                renderVisualization(algorithmVisualization, algorithmData, left, right);
                currentStepInfo.textContent = '准备开始算法演示...';
                playBtn.innerHTML = '<i class="fas fa-play mr-2"></i>开始演示';
                isPlaying = false;
                clearInterval(animationInterval);
            }
            
            function stepAlgorithm() {
                if (left >= right) {
                    currentStepInfo.innerHTML = `<span class="font-bold text-green-600">算法完成！最大面积为: ${maxArea}</span>`;
                    playBtn.innerHTML = '<i class="fas fa-check mr-2"></i>完成';
                    isPlaying = false;
                    clearInterval(animationInterval);
                    return;
                }
                
                const currentArea = Math.min(algorithmData[left], algorithmData[right]) * (right - left);
                maxArea = Math.max(maxArea, currentArea);
                
                currentStepInfo.innerHTML = `
                    当前指针: L=${left}, R=${right} |
                    当前高度: ${Math.min(algorithmData[left], algorithmData[right])} |
                    当前宽度: ${right - left} |
                    当前面积: ${currentArea} |
                    <span class="font-bold">最大面积: ${maxArea}</span>
                `;
                
                renderVisualization(algorithmVisualization, algorithmData, left, right);
                
                if (algorithmData[left] < algorithmData[right]) {
                    left++;
                } else {
                    right--;
                }
            }
            
            playBtn.addEventListener('click', function() {
                if (isPlaying) {
                    clearInterval(animationInterval);
                    playBtn.innerHTML = '<i class="fas fa-play mr-2"></i>继续';
                    isPlaying = false;
                } else {
                    if (left >= right) {
                        resetVisualization();
                    }
                    animationInterval = setInterval(stepAlgorithm, 1500);
                    playBtn.innerHTML = '<i class="fas fa-pause mr-2"></i>暂停';
                    isPlaying = true;
                }
            });
            
            resetBtn.addEventListener('click', resetVisualization);
            
            // 初始渲染
            renderVisualization(algorithmVisualization, algorithmData, left, right);
        });
    </script>
</body>
</html>